<!DOCTYPE html>
<html>
<head>
    <title>Puzzler</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../lib/css/chromium.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-glyphicons.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/aero.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/alertify/alertify.core.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/alertify/alertify.default.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<img id="J-Calculate" alt="Puzzler" class="hide" />
<input type="file" class="hide" id="J-hi-select">
<input type="file" class="hide" id="J-hi-saveDiretory" nwdirectory>
<input type="file" class="hide" id="J-hi-saveDiretoryForHtml" nwdirectory>
<input type="file" class="hide" id="J-hi-saveDiretoryForUserExport" nwdirectory>
<input type="file" class="hide" id="J-hi-saveDiretoryForUserImport">

<div id="wrapper" class="wrapper">
    <div class="toolbar">
        <div class="clearfix">
            <div id="J-selectFile" class="toolbar-item" title="选择图片 (Ctrl+N)">
                <span class="glyphicon glyphicon-folder-open"></span>
                <span class="name">选择图片</span>
            </div>
            <div class="separate"></div>
            <div id="J-exportPet" class="toolbar-item" title="仅导出图像切片 (Ctrl+Shift+S)">
                <span class="glyphicon glyphicon-picture"></span>
                <span class="name">导出切片</span>
            </div>
            <div id="J-exportHTML" class="toolbar-item" title="导出HTML和切片 (Ctrl+S)">
                <span class="glyphicon glyphicon-file"></span>
                <span class="name">导出HTML</span>
            </div>
            <div class="separate"></div>
            <div id="J-getLastLine" class="toolbar-item toolbar-dropmenu" title="参考线 (Ctrl+E)">
                <span class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-pencil"></span>
                    <span class="name">参考线</span>
                </span>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li class="dropdown-submenu">
                        <a tabindex="-1" href="#">黄金分割</a>
                        <ul class="dropdown-menu">
                            <li><a data-type="golden_section" data-param="990" tabindex="-1" href="#">990</a></li>
                            <li><a data-type="golden_section" data-param="980" tabindex="-1" href="#">980</a></li>
                            <li><a data-type="golden_section" data-param="960" tabindex="-1" href="#">960</a></li>
                            <li><a data-type="golden_section" data-param="950" tabindex="-1" href="#">950</a></li>
                            <li><a data-type="golden_section" data-param="custom" tabindex="-1" href="#">自定义</a></li>
                        </ul>
                    </li>
                    <li><a data-type="getLastLines" tabindex="-1" href="#this">拉取上一次的记录</a></li>
                </ul>
            </div>
            <div id="J-mapArea" class="toolbar-item" title="画热区 (Ctrl+R)">
                <span class="glyphicon glyphicon-th-large"></span>
                <span class="name">热区</span>
            </div>
            <div id="J-textArea" class="toolbar-item" title="自定义内容区 (Ctrl+T)">
                <span class="glyphicon glyphicon-text-width"></span>
                <span class="name">自定义</span>
            </div>
            <div class="separate"></div>
            <div id="J-reset" class="toolbar-item warning" title="清空画布记录 (Ctrl+D)">
                <span class="glyphicon glyphicon-ban-circle"></span>
                <span class="name">刷子</span>
            </div>
            <div class="separate"></div>
            <div id="J-useful-menu" class="toolbar-item toolbar-dropmenu" title="更多... (Ctrl+Q)">
                <span class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-list"></span>
                    <span class="name">更多...</span>
                </span>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a data-type="exportUserSetting" tabindex="-1" href="#this">导出用户设置</a></li>
                    <li><a data-type="importUserSetting" tabindex="-1" href="#this">导入用户设置</a></li>
                </ul>
            </div>
            <div id="J-about" class="toolbar-item fn-right" title="关于">
                <span class="glyphicon glyphicon-question-sign"></span>
                <span class="name">关于</span>
            </div>
            <div id="J-help" class="toolbar-item fn-right" title="使用帮助">
                <span class="glyphicon glyphicon-heart"></span>
                <span class="name">帮助</span>
            </div>
            <div id="J-userSettings" class="toolbar-item fn-right" title="设置">
                <span class="glyphicon glyphicon-cog"></span>
                <span class="name">设置</span>
            </div>
            <div id="J-copyCode" class="toolbar-item stat-success hide fn-right" title="导出成功，复制代码！">
                <span class="glyphicon glyphicon-ok-circle"></span>
                <span class="name">复制代码</span>
            </div>
        </div>
    </div>
    <div class="main clearfix">
        <div class="ruler-x" data-type="X"></div>
        <div class="ruler-y" data-type="Y"></div>
        <div class="main_right">
            <div class="main_right_con">
                <div class="addImg uninit btn btn-success" title="拖拽进来也可以哦 :-)">选择图片文件</div>
                <div class="image-wrapper" id="J-image-wrapper">
                    <img id="J-image" class="hide" alt="Puzzler">
                    <div id="J-image-process-cover" class="image-process-cover"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="statusBar">
        <div id="J-statusBar-inner" class="hide">
            <div class="lineStatus">
                <span class="inputing">
                    偏移:
                    <input type="text" id="J-offset" class="custom-appearance" value="0" title="参考线的偏移量&#13;回车修改">
                    &nbsp;质量:
                    <input type="text" id="J-quality" class="custom-appearance" value="75" title="导出图片(JPG/JPEG)的质量，压缩范围(0~100)&#13;默认为最佳的75">
                </span>
                <span class="status-span" id="J-imgInfo"></span>
            </div>
        </div>
    </div>
    <!--
    <div class="textzone">
        <textarea>1212</textarea>
        <div class="resize"></div>
        <div class="setting"><span class="glyphicon glyphicon-eye-open"></span></div>
        <div class="cover hide"></div>
    </div>
    -->
</div>

<div id="backing"><img src="img/blue.jpg"></div>
<div id="overlay"></div>

<!-- template start -->
<script type="template/dialog" id="J-settings">
    <div id="dialogWrap" class="dialogWrap">
        <div class="tab_trigger clearfix">
            <span class="tab_tigger_item on">模板</span>
            <span class="tab_tigger_item">常用</span>
            <span class="tab_tigger_item">高级</span>
        </div>
        <div class="tab_content">
            <div class="tab_content_item">
                <div class="tab_content_column">
                    <input type="radio" name="widthsmallbig" id="width_small" class="column_radio_template" value="small" checked>
                    <label for="width_small" class="column_label_radio">宽度 < 990</label>
                    <input type="radio" name="widthsmallbig" id="width_big" class="column_radio_template" value="big">
                    <label for="width_big" class="column_label_radio">宽度 > 990</label>
                    <input type="radio" name="widthsmallbig" id="width_big2" class="column_radio_template" value="big2">
                    <label for="width_big2" class="column_label_radio">宽度 > 990(挖空)</label>
                </div>
                <div class="tab_content_column">
                    <textarea id="J-templateArea" class="column_textarea form-control" data-name="template"></textarea>
                </div>
                <div class="tab_content_column">
                    <button id="J-template-reset" class="btn btn-danger btn-small custom-appearance">恢复出厂设置</button>
                </div>
            </div>
            <div class="tab_content_item hide">
                <div class="tab_content_column">
                    <fieldset>
                        <legend>导入/导出选项</legend>
                        <div class="fieldset_content">
                            <div class="fieldset_column">
                                <input type="radio" name="exportOption" id="set_export_default" class="column_radio" data-name="exportOption" value="default">
                                <label for="set_export_default" class="column_label_radio">在选中文件夹里放置导出文件</label>
                            </div>
                            <div class="fieldset_column">
                                <input type="radio" name="exportOption" id="set_export_newfolder" class="column_radio" data-name="exportOption" value="newfolder">
                                <label for="set_export_newfolder" class="column_label_radio">以图片名称创建新文件夹放置</label>
                            </div>
                            <div class="fieldset_column">
                                <label for="psd_convert" class="column_label_select">导入 psd 时转换为</label>
                                <select id="psd_convert" class="column_select" data-name="psd_convert">
                                    <option value="" selected>总是询问</option>
                                    <option value="jpg">jpg</option>
                                    <option value="png">png</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>标尺</legend>
                        <div class="fieldset_content">
                            <div class="tab_content_column">
                                <input id="ruler_show" type="checkbox" class="column_checkbox" data-name="ruler_show">
                                <label for="ruler_show" class="column_label_check">显示标尺</label>
                            </div>
                            <div class="tab_content_column">
                                <label for="ruler_step" class="column_label_select">步长</label>
                                <select id="ruler_step" class="column_select" data-name="ruler_step">
                                    <option value="100">100</option>
                                    <option value="50">50</option>
                                </select>
                            </div>
                        </div>
                    </fieldset>

                </div>
            </div>
            <div class="tab_content_item hide">
                <div class="tab_content_column">
                    <fieldset>
                        <legend>保存路径</legend>
                        <div class="fieldset_content">
                            <div class="fieldset_column">
                                <input type="radio" name="filePath" id="filePath_last" class="column_radio" data-name="mode" data-belong="savePath" value="last">
                                <label for="filePath_last" class="column_label_radio">记住最后的操作路径</label>
                            </div>
                            <div class="fieldset_column">
                                <input type="radio" name="filePath" id="filePath_custom" class="column_radio" data-name="mode" data-belong="savePath" data-noclick="yes" value="custom">
                                <label for="filePath_custom" class="column_label_radio">
                                    <input type="text" class="column_input J-filePath_custom" >
                                    <input type="file" class="hide" nwdirectory>
                                </label>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>升 级</legend>
                        <div class="fieldset_content">
                            <input type="radio" name="update" id="update_tip" class="column_radio" data-name="update" value="tip" checked>
                            <label for="update_tip" class="column_label_radio">有更新时提示我升级</label>
                            <input type="radio" name="update" id="update_never" class="column_radio" data-name="update" value="never">
                            <label for="update_never" class="column_label_radio">从不提示我升级</label>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</script>
<div id="J-template-rect-setting" class="setting-area hide">
    <div class="rect-setting-column rect-url">
        <input type="text" class="rect-input custom-appearance" value="#" data-type="url">
    </div>
    <div class="rect-setting-column rect-open">
        <input type="checkbox" class="custom-appearance" data-type="open" value="0"> 新窗口打开
    </div>
    <div class="rect-setting-column rect-width-height">
        宽：<input type="text" class="rect-input custom-appearance" value="0" data-type="width">
        &nbsp;高：<input type="text" class="rect-input custom-appearance" value="0" data-type="height">
    </div>
</div>
<div id="J-template-textarea" class="hide">
    <textarea></textarea>
    <div class="setting_textarea" title="预览"><span class="glyphicon glyphicon-eye-open"></span></div>
    <div class="edit_textarea hide" title="编辑"><span class="glyphicon glyphicon-edit"></span></div>
    <div class="resize_textarea"></div>
    <div class="cover"></div>
    <div class="preview_frame hide"><iframe src="proxy.html"></iframe></div>
</div>
<div id="J-template-text-preview" class="text-preview-area hide">
    <div class="text-preview-parse">
        212
    </div>
</div>
<script type="text/template" id="template-help">
    <div id="J-help-content" class="help-content">
        <%= content %>
    </div>
</script>
<script type="text/template" id="template-about">
    <div class="about">
        <div class="logo"><img src="img/logo.png"></div>
        <p>☞ <i><%= config.desc %></i> ☜</p>
        <p>Version: <strong><%= config.version %></strong></p>
        <p>By <a href="https://github.com/superRaytin">@Leon Shi</a></p>
        <div class="donate">
            <p>Puzzler 是开源项目，如果这个软件有帮助到你，可以用以下两种方式鼓励一下作者：</p>
            <p>方式一：<a class="donate-link" href="https://github.com/superRaytin/puzzler">☆ Star ☆</a> 该项目</p>
            <p>方式二：<span class="donate-coffee" id="J-donate">赞助一杯咖啡 ♨</span></p>
        </div>
        <p><input type="button" id="J-about-update" value="检查更新"></p>
    </div>
</script>
<script type="text/template" id="template-donate">
    <div class="donate-content">
        <img src="img/donate.jpg" alt="Donate" width="230" height="231">
        <img src="img/donate_wx.jpg" alt="Donate" width="230" height="229">
    </div>
</script>
<script type="text/template" id="template-update">
    <div class="update-content">
        <div class="logo"><img src="img/logo.png"></div>
        <p>发现新版本: <strong><%= version %></strong></p>
        <% if (description) { %>
        <div class="changelog"><%= description %></div>
        <% } %>
        <p><a href="<%= download.url %>">☞ 立即去下载</a></p>
    </div>
</script>
<!-- template end -->

<script type="text/javascript" src="../lib/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../lib/js/alertify.min.js"></script>
<script type="text/javascript" src="../lib/js/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="../lib/js/artDialog.plugins.min.js"></script>
<script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/js/kibo.js"></script>
<script type="text/javascript" src="../lib/js/marked.js"></script>
<script type="text/javascript" src="../lib/js/underscore.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

</body>
</html>
